<template>
	<view class="order-shop">
		<view class="m-l-20">
			<shop-title :shop="{shop_name:item.shop_name}"  :is-link="false"></shop-title>
		</view>
		<view class="order-goods">
			<order-goods :list="item.goods"></order-goods>
		</view>
		<view class="item flex row-between" @tap="onShowCoupon" v-if="orderType == 0">
			<view>店铺优惠券</view>
			<view class="flex">
				<text class="primary" v-if="item.discount_amount">-￥{{item.discount_amount }}</text>
				<text v-else class="muted">请选择</text>
				<u-icon name="arrow-right muted"></u-icon>
			</view>
		</view>
		<view class="item flex">
			<view>配送方式</view>
			<view class="flex-1 m-l-20 muted">{{item.distribution_type_text}}</view>
			<view>
				<price-format :price="item.shipping_price"></price-format>
			</view>
		</view>
		<view class="item flex row-between">
			<view>买家留言</view>
			<u-input v-model="remark" class="flex-1 m-l-20" :clearable="false" placeholder="请添加备注（150字以内）"></u-input>
		</view>
		<view class="item flex row-right">
			共{{item.total_num || (item.goods && item.goods[0].count)}}件，合计： <price-format weight="500" :color="colorConfig.primary" :first-size="36"
				:second-size="36" :price="item.total_amount || (item.goods && item.goods[0].team_price)"></price-format>
		</view>
		<u-popup v-if="orderType == 0" v-model="showCoupon" border-radius="14" mode="bottom" closeable :safe-area-inset-bottom="true">
			<view class="p-30">
				<view class="title">优惠券</view>
			</view>
			<view v-if="showCoupon">
				<tabs :current="active" :bar-width="100" :is-scroll="false">
					<tab :name="'可使用优惠券 (' + usableCoupon.length + ')'">
						<coupon-order :list="usableCoupon" :type="0" @change="onSelectCoupon" :coupon-id="couponId"></coupon-order>
					</tab>
					<tab :name="'不可用优惠券 (' + unusableCoupon.length + ')'">
						<coupon-order :list="unusableCoupon" :type="1" @change="showCoupon = false"></coupon-order>
					</tab>
				</tabs>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOrderCoupon
	} from '@/api/activity'
	export default {
		name: "order-shop",
		props: {
			item: {
				type: [Object,Array]
			},
			orderType: {
				type: Number
			}
		},
		data() {
			return {
				active: 0,
				remark: '',
				showCoupon: false,
				usableCoupon: [],
				unusableCoupon: [],
				usableCouponL: 0,
				unusableCouponL: 0,
				isRequest: false,
				couponId: ''
			};
		},
        mounted() {
          
        },
		methods: {
			onShowCoupon() {
				if (!this.isRequest) {
					uni.showLoading({
						title: '加载中...'
					})
					this.getCoupon()
				} else {
					this.showCoupon = true
				}
			},
			async getCoupon() {
				const {
					item: {
						goods,
						shop_id
					}
				} = this
				const params = goods.map(({
					item_id,
					num,
					goods_id
				}) => ({
					item_id,
					num,
					goods_id
				}))
				const {
					data,
					code
				} = await getOrderCoupon({
					goods: params,
					shop_id: shop_id
				})
				if (code == 1) {
					this.isRequest = true
					this.usableCoupon = data.suit
					this.usableCouponL = data.suit.length
					this.unusableCoupon = data.un_suit
					this.unusableCouponL = data.un_suit.length
					this.showCoupon = true
					uni.hideLoading()
				}
			},
			onSelectCoupon(e) {
				this.couponId = e
				this.$emit('changecoupon', e)
				this.showCoupon = false
			}
		},
		watch: {
			remark(val) {
				this.$emit('changeremark', {
					shop_id: this.item.shop_id,
					remark: val
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-shop {
		.order-goods {
			border-top: $-solid-border;
		}

		.item {
			height: 88rpx;
			padding: 0 24rpx;
		}
	}
</style>
